<template>
  <div class="paint-window">
    <!-- 标题栏 -->
    <div class="window-header">
      <div class="window-title">
        <img src="@/assets/icons/paint.svg" class="app-icon" />
        <span>无标题 - 画图</span>
      </div>
      <div class="window-buttons">
        <span class="minimize">─</span>
        <span class="maximize">□</span>
        <span class="close" @click="$router.push('/')">×</span>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="tool-group">
        <button 
          class="tool" 
          :class="{ active: currentTool === 'pencil' }"
          @click="selectTool('pencil')"
        >
          <i class="fas fa-pencil-alt"></i>
          <span>铅笔</span>
        </button>
        <button 
          class="tool"
          :class="{ active: currentTool === 'eraser' }"
          @click="selectTool('eraser')"
        >
          <i class="fas fa-eraser"></i>
          <span>橡皮擦</span>
        </button>
      </div>
      <div class="tool-group">
        <button 
          class="tool"
          :class="{ active: currentTool === 'rectangle' }"
          @click="selectTool('rectangle')"
        >
          <i class="fas fa-square"></i>
          <span>矩形</span>
        </button>
        <button 
          class="tool"
          :class="{ active: currentTool === 'circle' }"
          @click="selectTool('circle')"
        >
          <i class="fas fa-circle"></i>
          <span>圆形</span>
        </button>
      </div>
      <div class="tool-group colors">
        <div class="color-picker">
          <div 
            class="current-color"
            :style="{ background: currentColor }"
          ></div>
          <div class="color-grid">
            <div 
              v-for="color in colors"
              :key="color"
              class="color"
              :style="{ background: color }"
              @click="selectColor(color)"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 画布区域 -->
    <div class="canvas-area">
      <canvas 
        ref="canvas" 
        width="800" 
        height="600"
        @mousedown="startDrawing"
        @mousemove="draw"
        @mouseup="stopDrawing"
        @mouseleave="stopDrawing"
      ></canvas>
    </div>

    <!-- 状态栏 -->
    <div class="statusbar">
      <span>800 x 600 像素</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const canvas = ref(null)
const isDrawing = ref(false)
const currentTool = ref('pencil')
const currentColor = ref('black')
let ctx = null
let lastX = 0
let lastY = 0
let startX = 0
let startY = 0
let tempCanvas = null

const colors = [
  'black', 'white', 'red', 'green', 'blue', 'yellow',
  'purple', 'orange', 'pink', 'brown', 'gray', 'cyan'
]

onMounted(() => {
  ctx = canvas.value.getContext('2d')
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, 800, 600)
  
  // 设置默认样式
  ctx.strokeStyle = currentColor.value
  ctx.lineWidth = 2
  ctx.lineCap = 'round'
  
  // 创建临时画布用于预览
  tempCanvas = document.createElement('canvas')
  tempCanvas.width = 800
  tempCanvas.height = 600
})

// 开始绘画
const startDrawing = (e) => {
  isDrawing.value = true
  const rect = canvas.value.getBoundingClientRect()
  lastX = e.clientX - rect.left
  lastY = e.clientY - rect.top
  startX = lastX
  startY = lastY
  
  // 保存当前画布状态
  if (['rectangle', 'circle'].includes(currentTool.value)) {
    const tempCtx = tempCanvas.getContext('2d')
    tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height)
    tempCtx.drawImage(canvas.value, 0, 0)
  }
}

// 绘画中
const draw = (e) => {
  if (!isDrawing.value) return
  
  const rect = canvas.value.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top
  
  if (currentTool.value === 'pencil' || currentTool.value === 'eraser') {
    ctx.beginPath()
    ctx.moveTo(lastX, lastY)
    ctx.lineTo(x, y)
    ctx.stroke()
    
    lastX = x
    lastY = y
  } else {
    // 恢复到之前的状态
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)
    ctx.drawImage(tempCanvas, 0, 0)
    
    // 绘制预览
    if (currentTool.value === 'rectangle') {
      ctx.strokeRect(
        Math.min(startX, x),
        Math.min(startY, y),
        Math.abs(x - startX),
        Math.abs(y - startY)
      )
    } else if (currentTool.value === 'circle') {
      const radius = Math.sqrt(Math.pow(x - startX, 2) + Math.pow(y - startY, 2))
      ctx.beginPath()
      ctx.arc(startX, startY, radius, 0, Math.PI * 2)
      ctx.stroke()
    }
  }
}

// 结束绘画
const stopDrawing = () => {
  isDrawing.value = false
}

// 切换工具
const selectTool = (tool) => {
  currentTool.value = tool
  if (tool === 'eraser') {
    ctx.strokeStyle = 'white'
    ctx.lineWidth = 10
  } else {
    ctx.strokeStyle = currentColor.value
    ctx.lineWidth = 2
  }
}

// 选择颜色
const selectColor = (color) => {
  currentColor.value = color
  if (currentTool.value !== 'eraser') {
    ctx.strokeStyle = color
  }
  document.querySelector('.current-color').style.background = color
}
</script>

<style lang="scss" scoped>
.paint-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 700px;
  background: #F0F0F0;
  border: 1px solid #999;
  border-radius: 4px;
  display: flex;
  flex-direction: column;

  .window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: #E9E9E9;
    border-bottom: 1px solid #DDD;

    .window-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      
      .app-icon {
        width: 16px;
        height: 16px;
      }
    }

    .window-buttons {
      display: flex;
      gap: 4px;

      span {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        
        &:hover {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .toolbar {
    padding: 8px;
    background: #F5F5F5;
    border-bottom: 1px solid #DDD;
    display: flex;
    gap: 16px;

    .tool-group {
      display: flex;
      gap: 4px;
      padding-right: 16px;
      border-right: 1px solid #DDD;

      &:last-child {
        border-right: none;
      }

      .tool {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 12px;

        &:hover {
          background: #E5E5E5;
        }

        i {
          font-size: 16px;
        }

        &.active {
          background: #E5E5E5;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .colors {
      .color-picker {
        .current-color {
          width: 32px;
          height: 32px;
          background: black;
          border: 1px solid #999;
        }

        .color-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2px;
          margin-top: 4px;

          .color {
            width: 16px;
            height: 16px;
            border: 1px solid #999;
            cursor: pointer;

            &:hover {
              border-color: #333;
            }
          }
        }
      }
    }
  }

  .canvas-area {
    flex: 1;
    overflow: auto;
    background: #808080;
    display: flex;
    align-items: center;
    justify-content: center;

    canvas {
      background: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  }

  .statusbar {
    padding: 4px 8px;
    background: #F5F5F5;
    border-top: 1px solid #DDD;
    font-size: 12px;
    color: #666;
  }
}
</style> 